@import "template";

form {
    &.general {
        width: $form-width;
        margin: auto;        
        margin-bottom: 60px;
        font-family: Arial;
        position:relative;

        legend {
            color: $default-text-color;
            font-size: 16px;
            margin: 3px;
            padding: 3px;
            font-weight: bold;
            text-align: center;
        }
        fieldset 
        {
            overflow: hidden;
        }
        fieldset > div {
            overflow: hidden;
        }

        label {
            display: block;
            float: left;
            width: $form-label-width - 20;
            margin: 6px;
            font-size: 18px;
            font-weight: bold;
            height: 28px;
            color: $default-text-color;
            padding: 0 0 0 20px;
        }

        input, select, textarea {
            margin: 6px;
            float: right;
            display: block;
            width: $form-input-width;
            font-size: 14px;
            height: 28px;
            border-color: #ABABAB #DDDDDD #DDDDDD #ABABAB;
            border-left: 2px solid #ABABAB;
            border-radius: 5px 5px 5px 5px;
            border-style: solid;
            border-width: 2px 1px 1px 2px;
        }

        div.error label{
             background: url(../i/warning.png) 0 3px no-repeat;     
        }

        div.remote-start label
        {
             background: url(../i/validate-loading.gif) 0 3px no-repeat;
        } 

        span.validator{   
             margin-top:-3px;  
             padding: 7px 10px 10px 220px;      
             display:block;     
             position:absolute;
             left:0;
             width:$form-input-width;
             >span{
                color:white;
                text-align:left;
                border-radius: 7px;
                border:2px solid #DDD;
                box-shadow: 0 0 6px black;
                padding: 12px;
                display:block;
                font-family: Arial;
                font-weight: bold;
                background: red; 
            }
        }
    }

    .buttons {
        margin: 10px 0;
    }

    &.general button {
        float: right;

        &.cancel {
            float: left;
            margin: 0 0 0 25px;
        }

        &.save {
            margin: 0 5px 0 0;
        }
    }
}

button {
    background: $button-background-img;
    height: 27px;
    display: block;
    border-radius: 13px;
    text-decoration: none;
    color: $default-text-color;
    font-size: 18px;
    font-weight: bold;
    padding: 0 12px;
    border-top: 1px solid $default-border-color;
    border-left: 1px solid $default-border-color;
    border-right: 2px solid $default-border-color;
    border-bottom: 2px solid $default-border-color;
    text-align: center;
}

/* SELECT*/

form div > span.ui-combobox {
    a {
        display: block;
        float: right;
        height: 26px;
        margin-right: 5px;
        margin-top: -34px;
        width: 24px;
    }

    input.ui-combobox-input {
        border-radius: 5px 0 0 5px;
        display: block;
        float: left;
        margin-left: 8px;
        width: $form-input-width - 24;
        background: none;
    }
}

.ui-autocomplete {
    max-height: 200px;
    width: 194px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* DATAPICKER*/

.ui-datepicker-header {
    height: 24px;
}

.ui-datepicker-month {
    margin: 3px 0 0 25px;
    display: block;
    float: left;
}

.ui-datepicker-year {
    margin: 3px;
    display: block;
    float: left;
}

/*  MULTISELECT  */

.multiselect-items {
    overflow: hidden;

    li {
        border-bottom: 1px dashed black;
        padding: 5px 0;
    }

    a {
        float: right;
    }
}

.remove {
    background-image: $remove-img;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 16px 16px;
    height: 16px;
    width: 16px;
}

.invalid-value {
    border-color: #721818 #c75252 #c75252 #721818 !important;
}
